<template>
  <div class="page">
    <search></search>
    <div style="display: flex">
      <div class="contain">
        <img
          :src="`http://localhost:3001/${product.product_picture}`"
          class="image"
        />
        <div class="productbox">
          <div class="product_name">{{ product.product_name }}</div>
          <div class="product_title">{{ product.product_intro }}</div>
          <div class="pricebox">
            <Span>价格</Span>
            <span class="pricenumber">￥{{ product.product_selling_price }}</span>
          </div>
          <div class="addressword">
            <div v-if="address.name">
              <span
                ><span>配送至:</span
                >{{ " " + address.address }}&nbsp;&nbsp;</span
              ><span>{{ address.detail }}&nbsp;&nbsp;</span>

              <span>收货人:</span
              ><span>{{ address.name }}&nbsp;（收）&nbsp;&nbsp;</span
              ><span>{{ address.phone }}&nbsp;&nbsp;&nbsp;&nbsp;</span>
            </div>

            <span v-if="!address.name">暂无地址信息</span>
          </div>
          <div class="salesnumber">月销量{{ product.product_sales }}</div>
          <div>
            <span>数量</span>
            <el-input-number
              v-model="num"
              :min="1"
              :max="10"
              controls-position="right"
              size="large"
              @change="handleChange"
            />
          </div>
          <div class="btnbox">
            <el-button
              type="danger"
              @click="goaccounts(product.product_id)"
              class="btn"
              >购买</el-button
            >
            <el-button
              type="danger"
              class="btn"
              @click="addcart(product.product_id)"
              >加入购物车</el-button
            >
          </div>

          <div class="star" @click="insertstar()">
            <el-icon><Star /></el-icon>收藏该商品
          </div>
        </div>
      </div>
      <div class="storedetail">
        <div class="store_name">
          <el-icon><Medal /></el-icon>
          {{ storemsg.brand_name }}
        </div>
        <div>{{ storemsg.brand_introduce }}</div>
        <el-button @click="gostore(storemsg.brand_id)">进入品牌</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { Star } from "@element-plus/icons-vue";
import search from "../../components/search/seacrh.vue";
import {
  productdetailsApi,
  branddetailsApi,
  addCartApi,
  getaddressApi,
  addloveApi,
} from "../../api/goods";
import { useStore } from "vuex";
import { reactive, ref } from "vue";
import { Medal } from "@element-plus/icons-vue";
const route = useRoute();
const router = useRouter();
const store = useStore();
let product = reactive({});
let storemsg = ref({});
let address = ref([]);
const num = ref(1);
const getproductdetail = async () => {
  
  let data = await productdetailsApi(route.query.id);

  product = data.Product[0];
  console.log(product);
  getstoredetail(product.brand_id);
};

const getstoredetail = async (id) => {
  //let data = await storedetailsApi(id);
  let data = await branddetailsApi(id);
  console.log(data);
  storemsg.value = data.brand[0];
};
const gostore = (id) => {
  router.push({
    path: "/storepage",
    query: {
      id: id,
    },
  });
};
const addcart = async (id) => {
  if (store.state.userid != "") {
    let data = await addCartApi(store.state.user.user_id, id, num.value);

    if (data.code == "001" || data.code == "002") {
      ElMessage({
        message: data.msg,
        type: "success",
      });
    } else {
      ElMessage({
        message: data.msg,
        type: "warning",
      });
    }
  } else {
  }
};

const goaccounts = (id) => {
  router.push({
    path: "/accounts",
    query: {
      ids: id,
      number: num.value,
    },
  });
};

const getaddress = async () => {
  if (store.state.user.user_id !== "") {
    let data = await getaddressApi(store.state.user.user_id);
    console.log(data);
    if (data.code == "002") {
    } else {
      address.value = data.List[0];
    }
  }
};
const insertstar = async () => {
  console.log(store.state.user.user_id, product.product_id);
  let data = await addloveApi(store.state.user.user_id, product.product_id);
  console.log(data.code, "star");
  if (data.code == "001") {
    console.log("001");
    ElMessage({
      message: "添加收藏成功",
      type: "success",
    });
  } else if (data.code == "003") {
    ElMessage("该商品已经添加收藏，请到我的收藏查看");
  } else {
    ElMessage({
      message: "加入收藏失败",
      type: "warning",
    });
  }
};

getaddress();
getproductdetail();
</script>

<style scoped lang="less">
.page {
  background-color: #e9ded8;
  padding: 20px;
  // display: flex;
}
.contain {
  background-color: white;
  // position: relative;
  // left: 50%;
  // transform: translateX(-50%);
  margin: 20px 0;
  border: 1px solid #d3d5d9;
  padding: 40px;
  width: 80%;
  display: flex;
  text-align: left;
  border-radius: 25px;
  .image {
    width: 550px;
    margin: 0 25px;
  }
  .productbox {
    margin: 20px;
    width: 100%;
    .addressword {
      font-size: 20px;
    }
    .product_name {
      font-size: 25px;
      font-weight: 800;
    }
    .product_title {
      color: #ff4400;
      margin-bottom: 30px;
    }
    .pricebox {
      background-color: #efeeee;
      height: 100px;
      line-height: 100px;
      margin-bottom: 30px;
      .pricenumber {
        color: #fd3f31;
        font-size: 75px;
        font-weight: 800;
      }
    }
    .salesnumber {
      border: 1px dashed #d3d5d9;
      margin: 30px 0;
      padding: 20px;
      // margin-bottom: 30px;
    }
    .btnbox {
      margin: 60px 0;
      .btn {
        width: 200px;
        height: 50px;
        font-size: 20px;
      }
    }
    .star {
      text-decoration: underline;
    }
    .star:hover {
      color: red;
    }
  }
}
.storedetail {
  border: 1px double #d3d5d9;
  border-radius: 25px;
  width: 250px;
  padding: 40px;
  margin: 20px;
  background-color: white;
  text-align: center;
  padding: 20px;
  .store_name {
    font-weight: bold;
  }
}
</style>